<template>
  <view class="pages font-M" v-if="pagesShow">
    <view class="padding-l10 font-50 c-879B3D jh-line-height">
      {{zhName || ''}}
    </view>
    <view class="pages-box"
      v-if="info.disease && (info.disease.diseaseContent || info.disease.diseaseContentUs || info.disease.diseaseImg)">
      <view class="pages-title">
        <view class="font-28 c-00374D jh-line-height padding-b10">
          病症
        </view>
        <image class="pages-title-img" :src="ossDomain + '/article-title.png'" mode="widthFix"></image>
      </view>
      <view class="c-000 font-24 " v-if="info.disease.diseaseContent">
        {{info.disease.diseaseContent}}
      </view>
      <view class="c-000 font-24 " v-if="info.disease.diseaseContentUs">
        {{info.disease.diseaseContentUs}}
      </view>
      <view class="jh-flex jh-flex-wrap margin-t30">
        <block v-for="(i,index) in info.disease.diseaseImg">
          <image :src="i" class="img-type1" style="margin-right: 6rpx;" mode="heightFix"></image>
        </block>
      </view>
    </view>
    <view class="pages-box" v-if="info.acupuncture && info.acupuncture.acupunctureImg">
      <view class="pages-title">
        <view class="font-28 c-00374D jh-line-height padding-b10">
          针炙血位
        </view>
        <image class="pages-title-img" :src="ossDomain + '/article-title.png'" mode="widthFix"></image>
      </view>
      <view class="jh-flex jh-flex-wrap margin-t30">
        <block v-for="(i,index) in info.acupuncture.acupunctureImg">
          <image :src="i" class="img-type1" style="margin-right: 6rpx;" mode="heightFix"></image>
        </block>
      </view>
    </view>
    <view class="pages-box" v-if="info.chineseMedicine && info.chineseMedicine.length">
      <view class="pages-title">
        <view class="font-28 c-00374D jh-line-height padding-b10">
          中医
        </view>
        <image class="pages-title-img" :src="ossDomain + '/article-title.png'" mode="widthFix"></image>
      </view>
      <view class="jh-flex jh-flex-wrap margin-t30">
        <view v-for="i in info.chineseMedicine" style="margin-right: 6rpx;" class="margin-b30">
          <image class="img-type2" :src="i.chineseMedicineImg"></image>
          <view class="pages-subBox  jh-flex-center">
            <view class="font-24 c-fff" style="transform: scale(.6);transform-origin: center;">
              {{i.chineseMedicineName || i.chineseMedicineNameUs || ''}}
            </view>
          </view>
        </view>
      </view>
      <view style="position: relative;">
        <view class="tips-cn c-333 font-24 jh-line-height jh-text-right">以上方剂仅供参考，一定要在中医师的临证指导下用药</view>
        <view class="tips-en c-333 font-24 jh-line-height">he above prescriptions are for reference only, and must be
          used under the guidance of Chinese medicine doctor. </view>
      </view>
    </view>
    <view class="pages-box" v-if="info.drugs && info.drugs.length">
      <view class="pages-title">
        <view class="font-28 c-00374D jh-line-height padding-b10">
          药物治疗
        </view>
        <image class="pages-title-img" :src="ossDomain + '/article-title.png'" mode="widthFix"></image>
      </view>
      <view class="jh-flex jh-flex-wrap margin-t30">
        <view v-for="i in info.drugs" style="margin-right: 6rpx;" class="margin-b30">
          <image class="img-type3" :src="i.drugsImg"></image>
          <view class="box1 jh-flex-center jh-column">
            <view class="box1-text1 font-24 c-00374D font-H">
              {{i.drugsName || ''}}
            </view>
            <view class="box1-text2 font-24 c-00374D font-H">
              {{i.drugsNameUs || ''}}
            </view>
          </view>
        </view>
      </view>
      <view style="position: relative;">
        <view class="tips-cn c-333 font-24 jh-line-height jh-text-right">请咨询专业人士</view>
        <view class="tips-en c-333 font-24 jh-line-height">PLEASE CONSULT WITH PHYSICIAN</view>
      </view>
    </view>
    <view class="pages-box" v-if="(info.supplement && info.supplement.length) || (info.avoid && info.avoid.length)">
      <view class="pages-title">
        <view class="font-28 c-00374D jh-line-height padding-b10">
          营养补充剂
        </view>
        <image class="pages-title-img" :src="ossDomain + '/article-title.png'" mode="widthFix"></image>
      </view>
      <view class="jh-flex jh-flex-wrap margin-t30">
        <view v-for="i in info.supplement" style="margin-right: 27rpx;" class="margin-b30">
          <image class="img-type3" :src="i.supplementImg"></image>
          <view class="box2 jh-flex-center jh-column">
            <view class="box2-text1 font-24 c-00374D font-H">
              {{i.supplementName || ''}}
            </view>
            <view class="box2-text2 font-24 c-00374D font-H">
              {{i.supplementNameUs || ''}}
            </view>
            <view class="box2-text3 font-24 c-00374D font-H">
              {{i.supplementUse || ''}}
            </view>
            <view class="box2-text4 font-24 c-00374D font-H">
              {{i.supplementUseUs || ''}}
            </view>
          </view>
        </view>
      </view>
      <block v-if="info.avoid && info.avoid.length">
        <view class="font-24 c-879B3D jh-line-height" style="transform: scale(.625);transform-origin: left;">
          避免吃的食物
        </view>
        <view class="font-24 c-879B3D jh-line-height" style="transform: scale(.4);transform-origin: left;">
          FOODS TO AVOID MAKANAN YANG DIELAKKAN
        </view>
        <view id="avoid" class="font-24 jh-line-height" :style="{marginTop: `-${avoidHeight/2}px`}"
          style="width: 200%;transform: scale(.5);transform-origin: left bottom;line-height: 36rpx;">
          <block v-for="(i,index) in info.avoid">
            {{i.avoid}}/{{i.avoidUs}}{{index == info.avoid.length + 1 ? '' : '、'}}
          </block>
        </view>
        <view class="padding-t25"></view>
      </block>

      <block v-if="info.avoid && info.avoid.length">
        <view class="font-24 c-879B3D jh-line-height" style="transform: scale(.625);transform-origin: left;">
          有益的食物
        </view>
        <view class="font-24 c-879B3D jh-line-height" style="transform: scale(.4);transform-origin: left;">
          BENEFICIAL FOODS / MAKANAN YANG BERFAEDAH
        </view>
        <view id="beneficial" class="font-24 jh-line-height" :style="{marginTop: `-${beneficialHeight/2}px`}"
          style="width: 200%;transform: scale(.5);transform-origin: left bottom;line-height: 36rpx;">
          <block v-for="(i,index) in info.beneficial">
            {{i.beneficial}}/{{i.beneficialUs}}{{index == info.beneficial.length + 1 ? '' : '、'}}
          </block>
        </view>
      </block>
    </view>
    <view class="jh-flex-center">
      <image :src="ossDomain + 'consultative.png'" style="width: 72rpx;height: 27rpx;" mode="widthFix"
        @tap='callService'></image>
    </view>
  </view>
</template>

<script>
  import {
    mapState
  } from 'vuex'
  import utils from '@/common/utils/utils.js'
  export default {
    data() {
      return {
        ossDomain: uni.ossDomain,
        info: {},
        avoidHeight: 0,
        beneficialHeight: 0,
        zhName: '',
        enName: '',
        pagesShow: false
      }
    },
    onLoad(e) {
       let {id, appType, zhName, enName} = utils.getRequestParameters(decodeURIComponent(location.href))
      uni.setStorageSync('appType', appType)
      this.zhName = zhName || ''
      this.enName = enName || ''
      uni.showLoading()
      let obj = {
        id
      }
      this.$http.getDetail(obj).then(res => {
        uni.hideLoading()
        this.info = res.data
        setTimeout(() => {
          if (this.info.avoid?.length) {
            this.avoidHeight = document.querySelector('#avoid').offsetHeight
          }
          if (this.info.beneficial?.length) {
            this.beneficialHeight = document.querySelector('#beneficial').offsetHeight
          }
        }, 0)
        setTimeout(() => {
          if (this.info.avoid?.length) {
            this.avoidHeight = document.querySelector('#avoid').offsetHeight
          }
          if (this.info.beneficial?.length) {
            this.beneficialHeight = document.querySelector('#beneficial').offsetHeight
          }
        }, 1000)
        console.log(res.data);
        let {acupuncture,avoid,beneficial,chineseMedicine,disease,drugs,supplement} = this.info
        if (!acupuncture?.acupunctureImg?.length && !avoid?.length && !beneficial?.length && !chineseMedicine?.length && !disease?.diseaseContent && !disease?.diseaseContentUs && !disease?.diseaseImg?.length && !drugs?.length && !supplement?.length) {
          this.pagesShow = false
          uni.showToast({
            icon: 'none',
            title: '暂无内容',
            duration: 9999999999999
          })
        } else {
          this.pagesShow = true
        }
      })
    },
    methods: {
      callService() {
        if (window.callService) {
          window.callService()
        } else {
          uni.showToast({
            title: '暂时无法预约',
            icon: 'none'
          })
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  .pages {
    padding: 36rpx 24rpx;

    &-box {
      padding: 0 12rpx 30rpx;
      margin-bottom: 30rpx;
      border-bottom: 1px solid rgba($color: #cfcfcf, $alpha: .6);
    }

    &-title {
      margin-top: 12rpx;
      margin-bottom: 26rpx;

      &-img {
        height: 5rpx;
        width: 233rpx;
        display: block;
      }
    }

    .img-type1 {
      height: 124rpx;
      display: block;
    }

    .img-type2 {
      width: 106rpx;
      height: 92rpx;
      display: block;
    }

    .img-type3 {
      width: 114rpx;
      height: 114rpx;
      display: block;
    }

    &-subBox {
      width: 106rpx;
      height: 33rpx;
      background-color: #034C63;
    }
  }

  .tips {
    &-cn {
      transform: scale(.8);
      transform-origin: right;
    }

    &-en {
      white-space: nowrap;
      transform: scale(.5);
      transform-origin: right;
      position: absolute;
      right: 0;
    }
  }

  .box1 {
    position: relative;
    width: 100%;
    height: 64rpx;

    &-text1 {
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%) scale(.8);
      white-space: nowrap;
      line-height: 1;
    }

    &-text2 {
      position: absolute;
      top: 18rpx;
      left: 50%;
      transform: translateX(-50%) scale(.4);
      line-height: 1;
      white-space: nowrap;
    }
  }

  .box2 {
    position: relative;
    width: 100%;
    height: 64rpx;

    &-text1 {
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%) scale(.8);
      white-space: nowrap;
      line-height: 1;
    }

    &-text2 {
      position: absolute;
      top: 18rpx;
      left: 50%;
      transform: translateX(-50%) scale(.4);
      line-height: 1;
      white-space: nowrap;
    }

    &-text3 {
      position: absolute;
      top: 40rpx;
      left: 50%;
      transform: translateX(-50%) scale(.5);
      white-space: nowrap;
      line-height: 1;
    }

    &-text4 {
      position: absolute;
      top: 52rpx;
      left: 50%;
      transform: translateX(-50%) scale(.4);
      line-height: 1;
      white-space: nowrap;
    }
  }
</style>
